import { CSSTransition, SwitchTransition } from 'react-transition-group'
import './App.sass'
import RouterView from './router/RouterView'
import { useLocation } from 'react-router-dom'

function App () {
  const location = useLocation()
  // 获取路径深度，只有深度为1时应用动画
  const pathDepth = location.pathname.split('/').slice(0, 3)
  console.log(pathDepth)
  console.log(location)
  return (
    <div className='app'>
      <SwitchTransition mode="out-in">
        <CSSTransition
          key={ pathDepth.join('/') }
          timeout={500}
          classNames="page"
          unmountOnExit
        >
          <RouterView />
        </CSSTransition>
      </SwitchTransition>
    </div>
  )
}

export default App
